<div>
  <ul id="template-tabs">
    <li class="nav-item">
      <a data-i18n="filter.tab.home" class="nav-link active" data-toggle="tab" href="#sieve-widget-filter"
        role="tab"></a>
    </li>
    <li class="nav-item">
      <a data-i18n="filter.tab.help" class="nav-link" data-toggle="tab" href="#sieve-widget-help" role="tab"></a>
    </li>
  </ul>

  <div id="template-content">
    <div class="tab-content m-2">
      <div class="tab-pane fade show active" id="sieve-widget-filter" role="tabpanel">
        <div class="mb-3">
          <label data-i18n="filter.program.label"></label>
          <form class="was-validated" novalidate="novalidate">
            <input id="sivFilterProgram" type="text" class="form-control col-lg-8"
              data-i18n="filter.program.placeholder" required="required" />
            <div class="invalid-feedback" data-i18n="filter.program.invalid"></div>
          </form>

          <br />

          <div class="form-check">
            <input type="checkbox" class="form-check-input" id="sivFilterArgumentsCbx" />
            <label class="form-check-label" for="sivFilterArgumentsCbx" data-i18n="filter.arguments.label"></label>

            <p class="form-text" data-i18n="filter.arguments.text"></p>

            <div id="sivFilterArguments"></div>
          </div>
        </div>
      </div>
      <div data-i18n="filter.help" style="white-space: pre-line" class="tab-pane fade form-text" id="sieve-widget-help"
        role="tabpanel"></div>
    </div>
  </div>
</div>